<template>
  <div class="combo-assign-page">
    <el-card>
      <el-tabs tab-position="left" :style="setting.style" @tab-click="agentSelected" v-model="agent.id.toString()" stretch v-if="agent_list.length">
        <el-tab-pane :style="setting.body_style" v-for="tabitem in agent_list" :label="tabitem.name" :name="tabitem.id.toString()">
          <el-table :data="group_assign_list" border v-loading="setting.loading">
            <el-table-column label="套餐组" width="180" prop="group_name"></el-table-column>
            <el-table-column label="套餐" prop="combo_list">
              <div slot-scope="scope" class="table-item">
                <el-button v-for="(item, index) in scope.row.combo_list" @click="assignBox(item)"  size="medium">
                  <div class="h4">{{ item.combo_name }}</div>
                  <div :style="!item.assign.source? 'color:#909399': item.assign.source==2?'color: #e6a23c;':'color: #e6a23c;'">{{item.assign.id ? item.assign.rebate_type_name : '未设置'}} {{item.assign.rebate_value}}</div>
                </el-button>
              </div>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div v-else>
        <myEmpty></myEmpty>
      </div>
    </el-card>

    <el-dialog :visible.sync="assign_box.show" :close-on-click-modal="false" title="套餐分配" width="460px">
      <el-form :model="assign_box.form" label-position="left" label-width="80px">
        <el-descriptions :column="1" border class="show">
          <el-descriptions-item label="套餐">{{ assign_box.combo.combo_name }}</el-descriptions-item>
          <el-descriptions-item label="来源">{{ assign_box.form.source_name}}</el-descriptions-item>
        </el-descriptions>
        <el-form-item label="回扣" prop="rebate_value">
            <el-input v-model="assign_box.form.rebate_value" class="input-with-select">
              <el-select v-model="assign_box.form.rebate_type" slot="prepend" :clearable="false">
                <el-option label="比例" value="1"></el-option>
                <el-option label="金额" value="2"></el-option>
              </el-select>
              <span slot="append">{{assign_box.form.rebate_type == 1? '%': '元'}}</span>
            </el-input>
        </el-form-item>

      </el-form>
      <div class="submitButton">
        <el-button type="success" @click="assignSubmit">保存分配</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "WuliankaComboallocation",

  data() {
    return {
      group_list: [],
      agent_list: [],
      group_assign_list: [],
      agent: {}, // 选中商户
      // 分配盒子
      assign_box: {
        show: false,
        form:{},
        combo:{},
      },
      setting:{
        style:'',
        body_style:'',
        loading: false,
      },
    };
  },

  mounted() {
    this.setting.style = 'height: '+(window.innerHeight-168)+'px';
    this.setting.body_style = 'height: '+(window.innerHeight-162)+'px;overflow-y: auto;';
    this.getGroupAll()
    this.$api.foundation.dicListExtendCache([this.$api.Enum.DicTypeResellerList], {}, res => {
      if (res[this.$api.Enum.DicTypeResellerList].length == 0) {
        return
      }
      this.agent_list = res[this.$api.Enum.DicTypeResellerList]
      this.agent = res[this.$api.Enum.DicTypeResellerList][0]
      this.agent.id = this.agent.id.toString()
      this.getAssignList()
    })

  },

  methods: {
    getGroupAll(){
      this.$api.combo.groupAll('', res => {
        if (!res.status) {
          return this.$message.error(res.message);
        }
        this.group_list = res.data.list
      },{async:false})
    },
    // 获得分配列表
    getAssignList() {
      this.setting.loading = true
      this.$api.combo.assignList({agent_id: this.agent.id}, res => {
        if (!res.status) {
          return this.$message.error(res.message);
        }
        let tempMap = {};
        res.data.list.forEach(element => {
          tempMap[element.combo_id] = element;
        });

        let group_assign_list = []
        this.group_list.forEach((group, index1) => {
          let group_assign = this.$tool.copyJSON(group)
          group_assign.combo_list.forEach((combo, index2) => {
              combo.assign = tempMap[combo.combo_id]??{
                id:0,
                agent_id: this.agent.id,
                combo_id: combo.combo_id,
                rebate_type: 1,
                rebate_value: '',
              }
          });
          group_assign_list.push(group_assign)
        });
        this.group_assign_list = group_assign_list
        this.setting.loading = false
      });
    },


    // 选中商户
    agentSelected(tab) {
      this.agent = {
        id: tab.name,
        name: tab.label
      }
      this.getAssignList()
    },
    // 显示分配盒子
    assignBox(row) {
      this.assign_box.show = true;
      this.assign_box.combo = this.$tool.copyJSON(row);
      this.assign_box.form = this.assign_box.combo.assign;
      this.assign_box.form.rebate_type = this.assign_box.form.rebate_type.toString();
    },
    assignSubmit() {
      let body = this.$tool.copyJSON(this.assign_box.form)
      if (body.agent_id != this.agent.id){
        return this.$message.warning('提交异常，请刷新页面后重新操作！')
      }
      body.agent_id = Number(body.agent_id)
      body.rebate_type = Number(body.rebate_type)
      body.rebate_value = Number(body.rebate_value)
      this.$api.combo.assignSet(body, res => {
        if (!res.status) {
          return this.$message.error(res.message);
        }
        this.$message.success("修改成功");
        this.assign_box.show = false;
        this.getAssignList();
      });
    },
  }
};
</script>

<style lang="less" scoped>
.combo-assign-page{
  font-size: 14px;
}
.table-item {
  text-align: left;
  button{
    margin: 0 20px 0 0;
    min-width: 90px;
    line-height: 20px;
  }
}

.submitButton {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.show {
  margin-bottom: 20px;
}
</style>
